import React, { Component } from 'react'

export default class App extends Component {
    state = {
        count: 100
    }

    add(val) {
        console.log(this, val);
        this.setState({
            count: this.state.count + val
        })
    }

    add1 = (val, e) => {
        console.log(this, val);
        this.setState({
            count: this.state.count + val
        })
    }

    render() {
        return (
            <div>
                <h1>App - {this.state.count} </h1>

                <button onClick={this.add.bind(this, 2)}>点击加 2</button>
                {/* 该写法是错误，无法直接在事件中调用函数且传递参数，如果函数内有修改值会导致死循环 */}
                {/* <button onClick={this.add1(3)}>点击加 3</button> */}



                {/* 
                    推荐的写法，需要再事件后面写一个箭头函数，此时外部不管你定义的是普通
                    函数还是箭头函数，我们都可以正常的使用 this,也可以正常传递参数
                */}
                <button onClick={(e) => {
                    // this.add(8)
                    this.add1(8, e)
                }}>加指定数</button>

            </div>
        )
    }
}
